$(document).ready(function(){
    var divs=$(".listimg");
    var timeKey;
    function rotate(){
        shownext();
        timeKey = setTimeout(rotate,2000);
    };
    setAction(0, divs);
    timeKey = setTimeout(rotate, 2000);

    function setAction(index, divlist){
        divlist.removeClass("action");
        $('.img'+index).addClass("action");
        $('#content').data("index", index);

    }

    function getIndex(){
        return $('#content').data("index");
    }


    var btnprev=$(".bar-prev");
    btnprev.on('click', prevClick);

    function prevClick(){
        clearTimeout(timeKey);
        showprev();
        timeKey = setTimeout(rotate,2000);
    }

    var btnnext=$(".bar-next");
    btnnext.on('click', nextClick);

    function nextClick(){
        clearTimeout(timeKey);
        shownext();
        timeKey = setTimeout(rotate,2000);
    }

    function shownext(){
        var index = getIndex();
        index++;
        if(index>=$('#content .listimg').length){
            index = 0;
        }
        setAction(index,divs);
    }

    function showprev(){
        var index = getIndex();
        index--;
        if(index<0){
            index = $('#content .listimg').length-1;
        }
        setAction(index,divs);
    }


    var btnicon=$(".content-bar span");
    btnicon.on('click',barclick);
    
    function barclick(){
        var index = $(this).data("index");
        setAction(index,divs);
        clearTimeout(timeKey);
        timeKey = setTimeout(rotate, 2000);
    }
});


